<template>
    <div class="person">
        <h2>一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
        <button @click="changePrice">修改汽车价格</button>
        <br/>
        <h2>游戏列表</h2>
        <ul>
            <li v-for="g in games" :key="g.id">{{ g.name }}</li>
        </ul>
        <button @click="changeFirstGame">修改第一个游戏的名称</button>
        <hr/>
        <h2>测试 {{ obj.a.b.c }}</h2>
        <button @click="changeObj">改变</button>
    </div>
</template>

<script lang="ts" setup name="Person">
    // ref用于基本数据类型，reactive用于对象类型
    import { reactive } from 'vue';

    let car = reactive({ brand: '奔驰', price: 100 });
    let games = reactive([
        { id: 'adghgmnage01', name: '绝区零' },
        { id: 'adghgmnage02', name: '黑神话' },
        { id: 'adghgmnage03', name: '原神' },
    ]);
    let obj = reactive({
        a: {
            b: {
                c: 666
            }
        }
    });

    function changePrice() {
        car.price += 1;
    }

    function changeFirstGame() {
        games[0].name = '三角洲行动';
    }

    function changeObj() {
        // reactive响应对象支持深度响应
        obj.a.b.c = 999;
    }
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px
    }
    button {
        margin: 0 5px;
    }
</style>